<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro"
	xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout"
    layout:decorator="base">

<head>
	<meta charset="UTF-8" />
	<title th:text="#{detail}">详情</title>

	<link rel="stylesheet" type="text/css" href="/webResources/plugins/jquery-UI/jquery-ui-1.12.1.custom/jquery-ui.theme.css" />
	<link rel="stylesheet" type="text/css" href="/webResources/plugins/jqgrid/css/ui.jqgrid.css" />
	<link rel="stylesheet" type="text/css" href="/webResources/plugins/pageJquery/css/zxf_page.css"/>
	<link rel="stylesheet" href="/webResources/plugins/selectJquery/css/selectordie.css"/>
    <link rel="stylesheet" href="/webResources/plugins/selectJquery/css/selectordie_theme_03.css"/>

    <style>
	    .five-div{
        border-radius: 20px;background: #FFFFFF;width: 90%;height: 15%;margin-top: 3%;
	    }
	    .half-div{
	        text-align: center;font-size: 16px;
	    }
	    .half-width-div{
	        text-align: center;
	    }
	    .sod_label{
	        margin-top: -1.5%;
	    }
       .ui-jqgrid-htable{
            height: 50px;font-size: 14px;color: #80909c;font-weight: 500;
        }
        .ui-jqgrid .ui-jqgrid-htable th div {
            overflow: hidden;
            position: relative;
            height: 50px;
            padding-top: 5px;color: #BBC5D2;font-weight: 800;
        }
        .ui-jqgrid .ui-jqgrid-resize {
            height: 50px !important;
            position: relative;
            cursor: e-resize;
            display: inline;
            overflow: hidden;
        }
        .ui-jqgrid tr.jqgrow {
            outline-style: none;
            height: 50px;
        }
        .ui-jqgrid tr.ui-row-ltr td {
            text-align: left;
            border-right-width: 0px;
            border-right-color: inherit;
            border-right-style: solid;
            color: #333333;
            font-size: 14px;
            font-weight: 400;
        }
        .ui-state-highlight, .ui-widget-content .ui-state-highlight, .ui-widget-header .ui-state-highlight {
            border: 0px solid #fcd3a1;
            background: #fbf8ee;
            color: #444;
        }
        .ui-widget-content {
            border: 1px solid #eee;
            background: #fff;
        }
        .ui-jqgrid tr:nth-child(even) {
            background: #F5F9FA;
        }
        .ui-jqgrid tr:nth-child(odd) {
            background: #FFFFFF;
        }
        .ui-jqgrid .ui-jqgrid-htable .ui-th-div {
		    height: 40px;
		    margin-top: 5px;
		    display: inine-block;
		}
        .ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default {
            border: 0px solid #d8dcdf;
            border-top-width: 1px;
            border-bottom-width: 1px;
            border-left-width: 1px;
            border-top-style: solid;
            border-bottom-style: solid;
            border-left-style: solid;
            border-top-color: rgb(216, 220, 223);
            border-bottom-color: rgb(216, 220, 223);
            border-left-color: rgb(216, 220, 223);
            background: #FFFFFF;
            font-weight: normal;
            color: #555;
        }

    </style>

	<script type="text/javascript" src="/webResources/plugins/echarts/echarts.min.js"></script>
	<script type="text/javascript" src="/webResources/plugins/jqgrid/js/jquery.jqGrid.min.js"></script>
	<script type="text/javascript" src="/webResources/plugins/jqgrid/src/i18n/grid.locale-cn.js"></script>
	<script type="text/javascript" src="/webResources/plugins/pageJquery/js/zxf_page.js" ></script>
	<script type="text/javascript" src="/webResources/js/custom/page/createPage.js"></script>
	<script type="text/javascript" src="/webResources/plugins/selectJquery/js/selectordie.min.js"></script>
	<script type="text/javascript" src="/webResources/js/custom/report/detail-four.js"></script>

</head>

<body>
	<div layout:fragment="content" >
		<div class="table-top">
		    <div class="title-big" th:text="#{report}">
		        	数据统计
		    </div>
		    <div class="title-small">
		        >

		    </div>
		    <a href="javascript:void(0)" onclick="javascript:history.go(-1);return false;" >
		    	<button class="back" th:text="#{return}"></button>
		    </a>
		</div>
		<div class="companyMgr-page" style="padding: 1.5%;padding-bottom: 1%;background: #FFFFFF">
		    <div style="width: 100%;height: 100%;">
		        <div style="height: 4%;width: 100%">
		            <div class="company-select" style="width: 100%;height: 100%">
		                <div class="company-select-title" style="width: 5%;color: #0a0a0a">
		                    筛选：
		                </div>
		                <div class="time-select1">
		                    时间
		                </div>
		                <div class="time-select">
		                    <input class="form-control " id="indate" size="10" placeholder="开始时间" value=""/>
		                </div>
		                <div class="time-select2">
		                    至
		                </div>
		                <div class="time-select">
		                    <input class="form-control " id="indate1" size="10" placeholder="结束时间" value=""/>
		                </div>
		                <div class="time-select1">
		                    种类
		                </div>
		                <div class="select" style="float: left;width: 12%;margin-left:0%">
		                    <select class="myselect">
		                        <option value="111">全部 </option>
		                        <option value="111">已过保 </option>
		                        <option value="222">保修期</option>
		                        <option value="333">未确认 </option>
		                    </select>
		                </div>
		            </div>
		        </div>
		        <div class="half-div" style="height: 46%">
		            <div class="half-width-div" id="charts" style="width: 50%;float: left">

		            </div>
		            <div class="half-width-div" id="charts2" style="width: 50%;float: left">

		            </div>

		        </div>
		        <div class="half-div" style="padding-left: 2%;padding-right: 2%">
		            <div class="data-table" style="padding-left: 2%;padding-right: 2%">
						<div><table id="deviceTable"></table></div>
						<div id="devicePager"></div>
			    	</div>
		        </div>
		    </div>

		</div>
	</div>
</body>


</html>

